<template>
  <div>
     <div style="z-index: 0;position: relative;"  ref="webgl" class="canvas">
    </div>
  </div>
</template>

<script>
import { renderer } from "./threejs/index";

export default {
  name: "wdf",
  created: function () {
    // this.$refs.webgl.appendChild(renderer.domElement);//不可以
    // Three.js渲染结果Canvas画布插入到body元素中
    // document.body.appendChild(renderer.domElement);//可以访问body
  },
  mounted: function () {
    this.$refs.webgl.appendChild(renderer.domElement);
    console.log("ssssssssssssssss")
    // // Three.js渲染结果Canvas画布插入到body元素中
    // document.body.appendChild(renderer.domElement);
    // renderer.domElement.style.position = "absolute";
    // renderer.domElement.style.top = "0px";
    // renderer.domElement.style.zIndex = "-1"; //canvas全屏，不遮挡其它HTML元素
  },
  components: {
  
  }
};
</script>

<style scoped>
.canvas{
  position:absolute;
  top:0px;
  left:0px;
  /*canvas全屏，不遮挡其它HTML元素*/
  z-index:-1;
}
.header{
  height:50px;
  wdith:100%;
  background-color:rgba(255,255,255,0.1);
  color:#fff;
  font-size:24px;
  text-align:center;
  line-height:50px;
}
</style>
